<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=wind-barb
-->
<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>各类汽车总数变化分析</title>
    <link rel="stylesheet" href="../../static/css/navigationcss/reset.min.css">
    <link rel="stylesheet" href="../../static/css/navigationcss/style.css">
    <link rel="stylesheet" href="../../static/css/index.css"/>
</head>
<header>
    <div class="left nav">
        <ul>
            <li><i class="nav_1"></i><a href={% url 'index' %}>数据概览</a> </li>
            <li><i class="nav_2"></i><a href={% url 'one' %}>各省市汽车总数</a></li>
            <li><i class="nav_3"></i><a href={% url 'two' %}>各省市碳排放量</a></li>
            <li class="nav_active"><i class="nav_7"></i><a href={% url 'three' %}>各省市车类型</a></li>
            <li><i class="nav_9"></i><a href={% url 'four' %}>各省市绿化面积</a></li>
            <li><i class="nav_2"></i><a href={% url 'five' %}>各省市工厂数量</a></li>
        </ul>
    </div>

    <div class="showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
            clearTimeout(t); //清除定时器
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours(); //获取时
            var m = dt.getMinutes(); //获取分
            var s = dt.getSeconds(); //获取秒
            document.querySelector(".showTime").innerHTML =
                "当前时间：" +
                y +
                "年" +
                mt +
                "月" +
                day +
                "-" +
                h +
                "时" +
                m +
                "分" +
                s +
                "秒";
            t = setTimeout(time, 1000); //设定定时器，循环运行
        }
    </script>
</header>
{#<body style="height: 100%; margin: 0">#}
<body>
<div style="height: 10%;position:relative;text-align:center;">
    <ul class="hList" style="padding-left: 150px">
        <li>
            <a href="#click" class="menu liItem" id="河南省">
                <h2 class="menu-title menu-title">河南省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>

        <li>
            <a href="#click" class="menu liItem" id="北京市">
                <h2 class="menu-title menu-title_2nd">北京市</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>

        <li>
            <a href="#click" class="menu liItem" id="福建省">
                <h2 class="menu-title menu-title_3rd">福建省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>


        <li>
            <a href="#click" class="menu liItem" id="安徽省">
                <h2 class="menu-title menu-title_4th">安徽省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>
        <li>
            <a href="#click" class="menu liItem" id="甘肃省">
                <h2 class="menu-title menu-title_5th">甘肃省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>

        <li>
            <a href="#click" class="menu liItem" id="广西省">
                <h2 class="menu-title menu-title_6th">广西省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>


        <li>
            <a href="#click" class="menu liItem" id="浙江省">
                <h2 class="menu-title menu-title_8th">浙江省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>
        <li>
            <a href="#click" class="menu liItem" id="黑龙江省">
                <h2 class="menu-title menu-title_9th">黑龙江省</h2>
                <ul class="menu-dropdown"></ul>
            </a>
        </li>

    </ul>


</div>

<section class="mainbox">
    <div class="column">
        <div class="map">
            <div class="chart" id="container" style="height: 85%"></div>
        </div>
    </div>
</section>
{#        <script src="../static/js/echarts.min.js"></script>#}
<!-- 先引入jquery -->
<script src="../../static/js/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript" src="../../static/js/flexible.js"></script>
<script type="text/javascript" src="../../static/js/echarts.min.js"></script>
<!-- 先引入jquery -->
<script type="text/javascript" src="../../static/js/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>


<!-- 先引入jquery -->
<script src="../../static/js/jquery.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;

    function ajax(cityName) {

        $.getJSON("{% url 'showThree' %}", {cityName: cityName}, function (rawData) {
            console.log("ajax执行了一次getJson");
            var list = rawData.data.map(function (entry) {
                return [entry.year, entry.private, entry.cargo, entry.manned];
            });
            var priate_list = ['私人汽车'];
            var cargo_list = ['载货汽车'];
            var manned_list = ['载客汽车'];
            for (var i = 0; i < list.length; i++) {
                priate_list.push(list[i][1]);
                cargo_list.push(list[i][2]);
                manned_list.push(list[i][3]);
            }
            console.log(list)
            console.log(priate_list)
            {#测试，showThree_new.json中是测试例子#}
            if (typeof (cityName) == "undefined") {
                cityName = '30个省市'
            }
            console.log(cityName)
            option = {
                title: {
                    left: 'center',
                    text: cityName + '各类汽车数量变化(单位:辆)',
                    textStyle: {
                        color: '#fff'
                    }
                },
                legend: {
                    x: 'center',
                    y: 40,
                    textStyle: {
                        color: '#fff'
                    },
                    data: ['私人汽车', '载货汽车', '载客汽车']
                },
                color: ['#f80202', '#f8ce32', '#05e309'],
                tooltip: {
                    trigger: 'axis',
                    showContent: false
                },
                dataset: {
                    source: [
                        ['product', '2016', '2017', '2018'],
                        priate_list,
                        cargo_list,
                        manned_list

                    ]
                },
                xAxis: {
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }, type: 'category'
                },
                yAxis: {
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        }
                    }, gridIndex: 0
                },
                grid: {top: '60%'},
                series: [
                    {
                        name: '私人汽车',
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        name: '载货汽车',
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        name: '载客汽车',
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: {focus: 'series'}
                    },
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: [50, 100],
                        roseType: 'area',
                        center: ['70%', '30%'],
                        emphasis: {focus: 'data'},
                        label: {
                            formatter: '{b}: {@2016} ({d}%)'
                        },
                        itemStyle: {
                            normal: {
                                label: {
                                    textStyle: {
                                        color: '#049c83',
                                        fontSize: 14,
                                        fontWeight: 'bolder'
                                    }
                                }
                            }
                        },
                        encode: {
                            itemName: 'product',
                            value: '2016',
                            tooltip: '2016'
                        }
                    }
                ]
            };

            myChart.on('updateAxisPointer', function (event) {
                var xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                    var dimension = xAxisInfo.value + 1;
                    myChart.setOption({
                        series: {
                            id: 'pie',
                            label: {
                                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                            },
                            encode: {
                                value: dimension,
                                tooltip: dimension
                            }
                        }
                    });
                }
            });


            if (option && typeof option === 'object') {
                myChart.setOption(option);
            }
        });
    }

    ajax();
    $(".liItem").click(function () {
        console.log("点击了一次liItem!");
        var cityName = $(this).attr('id');
        console.log(cityName)
        ajax(cityName);
        {#return false 防止出现两次请求#}
        return false;

    });


</script>
</body>
</html>
